<template>
    <el-container class="article_list">
        <el-main class="main">
            <div>
                <div>
                    最佳适应度：
                    <el-input placeholder="请输入栏目名称" v-model="modelResultForm.fitness"
                              style="width: 200px;margin-top: 10px;margin-left: 10px;"></el-input>
                    <br/>
                </div>
                <div>
                    函数表达式：
                    <el-input placeholder="请输入栏目名称" v-model="modelResultForm.functionExpression"
                              style="width: 200px;margin-top: 10px;margin-left: 10px"></el-input>
                    <br/>
                </div>
                <div>
                    均方根误差：
                    <el-input placeholder="请输入栏目名称" v-model="modelResultForm.rootMeanSquareError"
                              style="width: 200px;margin-top: 10px;margin-left: 10px"></el-input>
                    <br/>
                </div>
                <div id="main" style="width: 800px; height: 400px; margin-top: 30px" ref="chart1"></div>
            </div>
        </el-main>
    </el-container>
</template>
<script>
    import BlogTable from '@/components/BlogTable'
    import BlogCfg from '@/components/BlogCfg'
    import {getRequest} from '../utils/api'
    import * as echarts from 'echarts';
    export default {
        activated: function () {              //mounted只在页面第一次打开时运行一次 activated这个多次重新打开页面都会运行
            let user = sessionStorage.getItem("user");
            if (user!= null) {
                // 将JSON格式的对象解析为js对象
                this.currentUser= JSON.parse(user);
                this.identity=this.currentUser[0].identity;
                if (this.identity=="普通用户"){
                    this.$alert('普通用户无法建模！');
                }
            }
            this.data1=[],
                this.data2=[],
                this.data3=[],
            this.getModelParam()
        },
        data() {
            return {
                identity: "",
                currentUser: {},
                modelResultForm: {
                    fitness: null,
                    functionExpression: null,
                    rootMeanSquareError: null,
                    lineChartData: null,
                    modelName: null,
                },
                activeName: 'post',
                isAdmin: false,
                charts: "",
                opinionData: ["3", "2", "4", "4", "5", "4"],//折线图数据
                data1:[],
                data2:[],
                data3:[],
                m1:null,
                m2:'',
                m3:'',
            };
        },
        methods: {
            getModelParam() {
                this.modelResultForm.fitness = this.$route.params.fitness,
                    this.modelResultForm.functionExpression = this.$route.params.functionExpression,
                    this.modelResultForm.rootMeanSquareError = this.$route.params.rootMeanSquareError,
                this.modelResultForm.lineChartData = this.getLineChartData(this.$route.params.fittingCurvePath),
                    this.modelResultForm.modelName=this.$route.params.modelName,
                console.log(this.modelResultForm.modelName);
                if(this.modelResultForm.modelName==null){
                    this.$alert('暂无建模结果');
                }
            },
            getLineChartData(fittingCurvePath) {//获取建模后生成的拟合曲线文件的内容
                getRequest("/system/model/returnTrainTxt", fittingCurvePath).then(resp=> {
                    if (resp.status == 200) {
                        console.log(resp);
                        for(let i = 0; i < resp.data.length; i++){  //电压值
                            this.data1.push(resp.data[i][0]);
                        }
                        for(let i = 0; i < resp.data.length; i++){  //真实值
                            this.data2.push(resp.data[i][1]);
                        }
                        for(let i = 0; i < resp.data.length; i++){  //预测值
                            this.data3.push(resp.data[i][2]);
                        }
                        this.initCharts1();
                        console.log(this.data1);
                        console.log(this.data2);
                        console.log(this.data3);
                    }else {
                    this.$message({type: 'error', message: '数据加载失败!'});
                }
            }, resp=> {
        _this.$message({type: 'error', message: '数据加载失败!'});
    });
            },
            initCharts1 () {
                let myChart = this.$echarts.init(this.$refs.chart1);
                console.log(this.$refs.chart1)
                myChart.setOption({// 绘制图表
                    title: {
                        text: [this.modelResultForm.modelName+'浓度值mol/L']
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['真实值', '预测值']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data1,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '真实值',
                            type: 'line',
                            stack: 'Total',
                            data: this.data2,
                        },
                        {
                            name: '预测值',
                            type: 'line',
                            stack: 'Total',
                            data: this.data3,
                        }
                    ]
                })
            },
        }
    };
</script>
<style>
    .article_list > .header {
        background-color: #ececec;
        margin-top: 10px;
        padding-left: 5px;
        display: flex;
        justify-content: flex-start;
    }
    .article_list > .main {
        /*justify-content: flex-start;*/
        display: flex;
        flex-direction: column;
        padding-left: 0px;
        background-color: #fff;
        padding-top: 0px;
        margin-top: 8px;
    }
</style>
